<template>
  <div class="about">
    <h1>访问state数据</h1>
    <div>
      <!-- 模块需要单独加上模块名称进行调用 -->
      {{ $store.state.student.students }}
    </div>

    <div>
      {{ mystudent }}
    </div>
    <div>
      {{ snumb }}
    </div>
    <div>访问getters: {{ fmtNumb }}</div>
    <div>getters：{{ $store.getters["student/fmtNumb"] }}</div>
    <button @click="fn1">添加1</button>
    <button @click="fn2">添加2</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    ...mapState({
      //组件内属性名 : state=>state.模块名.属性
      mystudent: (state) => state.student.students,
      snumb: (state) => state.student.snumb,
    }),
    ...mapGetters({
      //组件内属性名 : "模块名称/属性"
      fmtNumb: "student/fmtNumb",
    }),
  },
  methods: {
    ...mapMutations({
      //组件内方法名 : "模块名称/方法名"
      addStu: "student/addStu",
    }),
    ...mapActions({
      //组件内方法名 : "模块名称/方法名"
      asyncAddStu: "student/asyncAddStu",
    }),
    fn1() {
      this.addStu({ stuname: "xiao", age: 20 });
    },
    fn2() {
      this.asyncAddStu({ stuname: "xiao123", age: 20 });
    },
  },
};
</script>
